<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch-computed</title>
    <script src="vue.js"></script> 
   <script>
    /***
    computed 特殊场景计算
    

    */

    window.onload = function(){
        var vm = new Vue({
            el:'#my',
            data:{
                info:{name:'套餐A',price:100,qty:2},
                sales:0.8,
                fee:5,
                num1:9
            },
            methods:{
                action:function(newValue,oldValue){

                },
                getNum2:function(){
                    this.num2 = 200;//这里并不是直接修改计算属性 num2的值
                    //这里调用后，会进去计算属性 set(val) 方法，并结合get完成修改num2的值
                }
            },
            
            //计算属性，存储及处理数据
            //total 的用法与data中属性用法一样，但不能和data中属性重名
            //若被计算的属性值发生变化时，计算属性会被触发并自动计算
            computed:{
                total:function(){
                    return (this.info.price * this.info.qty * this.sales + this.fee);
                },

                //读取值进入get，注意get&set是Vue内置的方法，不能随意命名
                //修改值进入set,但无法直接修改，透过中转方式修改计算属性的值
                num2:{
                    get:function(){
                        console.log('get');
                        return this.num1;
                    },
                    set:function(val){
                        console.log('set');
                        // this.num2 = val;//错误的写法，不能直接修改
                        this.num1 = val;
                    }
                }
            }
        });

    }


   </script>

</head>
<body>
    <div id="my">
       购买了{{info.name}},数量{{info.qty}},单价{{info.price}},折扣{{sales}},消费{{fee}},总价:{{total}}
        <hr>
        num1:{{num1}}<br>
        num2:{{num2}}<br>
        <button @click="getNum2">Test</button>
    </div>
</body>
</html>